<template>
  <div>
    <ul class="prolist">
      <h4>为你推荐</h4>
      <li v-for="(itm, idx) in prolist" :key="idx" @click="goDetail(itm.proid)">
        <img :src="itm.pic" alt="" class="pic">
        <span class="city">{{itm.city_name}}</span>
        <div>
          <p>
            <img v-show="itm.method === 1" src="https://image.juooo.com/upload/i.png" alt="">
            {{itm.name}}
          </p>
          <span>{{itm.start_show_time.substring(0,10)}}&nbsp;{{itm.show_time_bottom}}&nbsp;{{itm.start_show_time.substring(11,16)}}</span>
          <span>{{'￥' + itm.min_price}}&nbsp;&nbsp;<b>起</b></span>
          <span><b>{{itm.support_desc}}</b></span>
        </div>
      </li>
    </ul>
    <div class="goTop" @click="goTop" v-if="goTopShow">
      <img class="goTop_pic" src="" alt="">
      <!-- <van-icon name="arrow-up" class="goTop_icon" /> -->
      <!-- <p>返回顶部</p> -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      goTopShow: false
    }
  },
  props: {
    prolist: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  mounted () {
    // console.log(this.prolist)
    window.addEventListener('scroll', this.scrollToTop)
  },
  methods: {
    scrollToTop () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 2400) {
        this.goTopShow = true
      } else {
        this.goTopShow = false
      }
    },
    goTop () {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
    goDetail (data) {
      this.$router.push({ path: '/detail', query: { proid: data } })
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  }
}
</script>

<style lang="scss" scoped>
.prolist {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0.1rem 0.15rem;
  overflow: hidden;
  h4 {
    width: 100%;
    height: 0.24rem;
    line-height: 0.24rem;
    font-size: 0.18rem;
    text-align: left;
    margin-bottom: 0.1rem;
  }
  li {
    width: 49%;
    height: 3.68rem;
    border-radius: 0.04rem;
    overflow: hidden;
    float: left;
    margin-bottom: 0.08rem;
    background: #f5f5f5;
    position: relative;
    .pic {
      width: 100%;
      height: 2.31rem;
    }
    .city {
      position: absolute;
      padding: 0 0.05rem;
      height: 0.18rem;
      text-align: center;
      line-height: 0.18rem;
      background-image: linear-gradient(-45deg, rgba(38, 38, 38, 0.8), rgba(70, 68, 65, 0.8));
      right: 0.1rem;
      top: 0.05rem;
      color: #fefefe;
      font-size: 0.12rem;
      border-radius: 0.02rem;
    }
    div {
      width: 100%;
      height: 1.36rem;
      box-sizing: border-box;
      padding: 0.08rem 0.11rem 0.11rem 0.11rem;
      p {
        line-height: 0.2rem;
        height: 0.4rem;
        color: #232323;
        font-size: 0.14rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-align: left;
        img {
          width: 0.33rem;
          height: 0.17rem;
          display: inline-block;
        }
      }
      span {
        width: 100%;
        height: 0.2rem;
        margin-top: 0.04rem;
        line-height: 0.2rem;
        display: block;
        text-align: left;
      }
      span:nth-of-type(1) {
        color: #666666;
        font-size: 0.14rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      span:nth-of-type(2) {
        color: #ff6743;
        font-size: 0.15rem;
        b {
          font-weight: normal;
          font-size: 0.12rem;
          color: #999999;
        }
      }
      span:nth-of-type(3) {
        b {
          float: left;
          padding: 0 0.05rem;
          height: 0.18rem;
          line-height: 0.18rem;
          background: #FFF1D5;
          color: #FF6743;
          font-size: 0.12rem;
          font-weight: normal;
          border-radius: 0.05rem;
        }
      }
    }
  }
  li:nth-of-type(2n-1) {
    margin-right: 2%;
  }
}
.goTop {
  position: fixed;
  right: 0;
  bottom: 0.7rem;
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  z-index: 20;
  .goTop_pic {
    width: 0.4rem;
    height: 0.4rem;
  }
}
</style>
